<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单校验</title>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/>
	</head>
	<body>
		<div >
			<form id="myform" class="form-horizontal" role="form" action="http://www.baidu.com"  >
			  <div class="form-group">
			    <label for="userName" class="col-sm-2 control-label">姓名</label>
			    <div class="col-sm-4">
			      <input type="text" class="form-control" id="userName" name="userName" placeholder="请输入姓名">
			    </div>
			  </div>
			  <div class="form-group">
			    <label for="userPwd" class="col-sm-2 control-label">密码</label>
			    <div class="col-sm-4">
			      <input type="password" class="form-control" id="userPwd" name="userPwd" placeholder="请输入密码">
			    </div>
			  </div>
			  <div class="form-group">
			    <label for="userAge" class="col-sm-2 control-label">年龄</label>
			    <div class="col-sm-4">
			      <input type="number" min="1" max="100" class="form-control" id="userAge" name="userAge" placeholder="请输入年龄">
			    </div>
			  </div>
			  <div class="form-group">
			    <label for="birthday" class="col-sm-2 control-label">生日</label>
			    <div class="col-sm-4">
			      <input type="date"  class="form-control" id="birthday" name="birthday" placeholder="请输入出生年月">
			    </div>
			  </div>
			  <div class="form-group">
			    <label for="userSex" class="col-sm-2 control-label">性别</label>
			    <div class="col-sm-4">
					<label class="radio-inline">
						<input type="radio" name="userSex" value="男"> 男
					</label>
					<label class="radio-inline">
						<input type="radio" name="userSex" value="女"> 女
					</label>
					<label class="radio-inline">
						<input type="radio" name="userSex" value="未知"> 未知
					</label>
			    </div>
			  </div>
			  
			  <div class="form-group">
			    <label for="userHobby" class="col-sm-2 control-label">爱好</label>
			    <div class="col-sm-4">
					<label class="checkbox-inline">
						<input type="checkbox" name="userHobby" value="sing"> 唱歌
					</label>
					<label class="checkbox-inline">
						<input type="checkbox" name="userHobby" value="sleep"> 睡觉
					</label>
					<label class="checkbox-inline">
						<input type="checkbox" name="userHobby" value="coding"> 敲代码
					</label>
			    </div>
			  </div>
			  
			  <div class="form-group">
			    <label for="city" class="col-sm-2 control-label">城市</label>
			    <div class="col-sm-4">
			  		<select class="form-control" name="city" id="city">
					  <option value="">请选择</option>
					  <option>上海</option>
					  <option>北京</option>
					  <option>深圳</option>
					  <option>杭州</option>
					</select>		
			    </div>
			  </div>
			  
			  
			  <div class="form-group">
			    <label for="remark" class="col-sm-2 control-label">简介</label>
			    <div class="col-sm-4">
			  		<textarea class="form-control" name="remark" rows="3" id="remark"></textarea>	
			    </div>
			  </div>
			  
			  <div class="form-group">
			    <div class="col-sm-offset-2 col-sm-10">
			      <button type="button" class="btn btn-default" id="submitBtn">提交</button> 
				  &nbsp;&nbsp;&nbsp;&nbsp;<span id="msg" style="color: red;"></span>
				  <!-- <button type="button" class="btn btn-default" onclick="submitForm()">提交</button>
				  <button type="submit" class="btn btn-default" onclick="return submitForm02()">提交</button>
				  <button type="submit" class="btn btn-default" >提交</button> -->
			    </div>
			  </div>
			</form>
		</div>
		
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			/**
			 * 表单校验
			 * 	要求：
					1、验证姓名
					  1)不能为空  2)长度为 6-12 位
					2、验证密码
					  1)不能为空   2)长度为 6-12 位    3)不能包含用户名
					3、年龄: 必须填写
					4、性别：必须选择一项
					5、爱好: 必须选择一项
					6、城市: 必须选择一项
				满足以上条件
					1、弹出所有的内容    2、提交表单
				否则
					1、说明错误原因    2、不能提交表单
			 */
			$("#submitBtn").click(function(){
				/**
				 * 验证姓名
				 * 	1)不能为空  2)长度为 6-12 位
				 */
				var userName = $("#userName").val();
				// 1)不能为空
				if (isEmpty(userName)) {
					$("#msg").html("姓名不能为空！");
					return;
				} 
				// 2)长度为 6-12 位
				if (userName.length < 6 || userName.length > 12) {
					$("#msg").html("姓名的长度在6~12位之间！");
					return;
				}
				
				/**
				 * 验证密码
				 *	  1)不能为空   2)长度为 6-12 位    3)不能包含用户名
				 */
				var userPwd = $("#userPwd").val();
				// 1)不能为空
				if (isEmpty(userPwd)) {
					$("#msg").html("密码不能为空！");
					return;
				} 
				// 2)长度为 6-12 位
				if (userPwd.length < 6 || userPwd.length > 12) {
					$("#msg").html("密码的长度在6~12位之间！");
					return;
				}
				// 3)不能包含用户名  indexOf() 判断字符串中是否包含指定值，如果不包含则返回-1
				if (userPwd.indexOf(userName) != -1) {
					$("#msg").html("密码不能包含姓名在内！");
					return;
				}
				
				
				/**
				 * 验证年龄
				 * 	1）不能为空 2）范围在1~100之间
				 */
				var userAge = $("#userAge").val();
				// 1)不能为空
				if (isEmpty(userAge)) {
					$("#msg").html("年龄不能为空！");
					return;
				} 
				// 2）范围在1~100之间
				if (userAge < 1 || userAge > 100) {
					$("#msg").html("年龄范围在1~100之间！");
					return;
				}
				
				/**
				 * 验证生日
				 * 	不能为空
				 */
				var birthday = $("#birthday").val();
				// 1)不能为空
				if (isEmpty(birthday)) {
					$("#msg").html("生日不能为空！");
					return;
				} 
				
				/**
				 * 验证性别
				 * 	必选选择一个
				 */
				var userSex = $("[name='userSex']:checked").val();
				if (isEmpty(userSex)) {
					$("#msg").html("请选择性别！");
					return;
				}
				
				
				/**
				 * 验证爱好
				 * 	必须选择一项
				 */
				var hobbys = $("[name='userHobby']:checked");
				if (hobbys.length == 0) {
					$("#msg").html("请选择爱好！");
					return;
				}
				var userHobbys = "";
				// 遍历获取对应的爱好值
				for (var i = 0; i < hobbys.length; i++) {
					userHobbys += hobbys[i].value + ","
				}
				// 截取字符串，去除最后多余的"，"
				userHobbys = userHobbys.substring(1);
				
				
				/**
				 * 验证城市
				 * 	必须选择城市
				 */
				var city = $("#city").val();
				if (isEmpty(city)) {
					$("#msg").html("请选择城市！");
					return;
				} 
				
				var str = "姓名：" + userName + "\n" +"密码：" + userPwd;
				alert(str);
				
				// 提交表单
				$("#myform").submit();
			});
			
			/**
			 * 判断字符串是否为空
			 * 	如果为空，返回true
			 * 	如果不为空，返回false
			 * 
			 *  trim()：去除字符串的前后空格
			 * @param {Object} str
			 */
			function isEmpty(str) {
				if (str == null || str.trim() == "") {
					return true;
				}
				return false;
			}
			
			
			
			
			
			
			
			
			/**
			 * 表单提交的三种方式
			 * 	1. 普通按钮 + 绑定点击事件 + 手动提交表单
			 * 	2. 提交按钮 + 绑定点击事件，返回布尔类型 + 返回true，则提交表单；返回false，则不提交
			 *  3. 提交按钮 + 表单绑定submit事件，返回布尔类型 + 返回true，则提交表单；返回false，则不提交
			 */
			
			/**
			 * 1. 普通按钮 + 绑定点击事件 + 手动提交表单
			 */
			function submitForm() {
				/**
				 * 表单校验
				 */
				if (1==1) {
					return;
				}
				
				// 手动提交表单
				$("#myform").submit();
			}
			
			/**
			 * 2. 提交按钮 + 绑定点击事件，返回布尔类型 + 返回true，则提交表单；返回false，则不提交
			 */
			function submitForm02() {
				/**
				 * 表单校验
				 */
				if (1==1) {
					return false;
				}
			}
				
		</script>
		
	</body>
</html>
